<!DOCTYPE html>
<html>
<head>
{include file="common/head"}
<style type="text/css">
  .article-content{
    
    margin-top: 20px;
    
  }
    .article-content p{
    font-size: 16px;
    color: #262626;
    line-height: 32px;
    letter-spacing: 1px;
    text-indent: 36px;
    word-break: break-word;
    
  }
  blockquote {
    margin-left: -20px;
}
.title {
    font-weight: 700;
    font-size: 16px;
    color: #6d6d6d;
	margin-bottom: 20px;
}
</style>
<script type="text/javascript">
var wdinfo = {
  id: {$article.id}
  ,tags: '{$article.tags}'
  ,title: '{$article.title}'
  ,createTime: '{$article.create_time}'
};
</script>
</head>
<body>
{include file="common/header"}
<div class="layui-container" style="margin-top: 100px; margin-bottom: 50px;">
	<h1 style="color: #000000;font-size: 40px;">{$article.title}</h1>
	<div style="margin-top: 20px;">
        <div style="float: left;"><a href="{:url('wendasns/home/index',['id'=>$article.user_id],false)}" class="portrait-sm">{:portrait($article.user_id)}</a></div>
        <div>
	        <p><a href="{:url('wendasns/home/index',['id'=>$article.user_id],false)}" style="font-size: 16px;margin-right: 10px;">{$article.users.username}</a> {if $article.tags}<i class="layui-icon layui-icon-note" style="font-size: 12px;"></i> {volist name=":explode(',',$article.tags)" id="item"}<a href="{:url('wendasns/topic/show',['tags'=>$item])}" style="margin-right: 10px;font-size: 12px;">{$item}</a>{/volist}{/if}</p>
	        <p style="font-size: 12px;"><span style="margin-right: 10px;">发布时间：{:range_time($article.create_time)}</span><span>阅读({$article.visits})</span></p>
        </div>
    </div>
</div>

<hr>
  
  
<div class="layui-container" style="">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md9">
    
		<div class="layui-card">
			{if $article.status eq 'check'}<div class="layui-card-header" style="color: #FFFFFF;background-color: #FFB800;"><i class="layui-icon layui-icon-triangle-r"></i> 文章正在审核中 ，仅您自己可见。</div>{/if}
			{if $article.remove}<div class="layui-card-header" style="color: #FFFFFF;background-color: #FFB800;"><i class="layui-icon layui-icon-delete"></i> 文章已被删除 ，仅您自己可见。</div>{/if}
			<div class="layui-card-body">
            	{if $article.summary}<blockquote class="layui-elem-quote">摘要：{$article.summary}</blockquote>{/if}
			<div class="article-content">{$article.content|raw}</div>
			{if $article.remove eq 0}
            <div class="article-handle" style="margin-top: 20px;text-align: center;line-height: 50px;">
            	<a href="{:url('wendasns/article/praise')}" class="layui-btn layui-btn-normal J_req" style="margin-right: 10px;color: #ffff;" data-json='{"id":"{$article.id}"}' data-click="praise"><i class="layui-icon layui-icon-praise"></i>喜欢(<font>{$article.praise}</font>)</a><br>
              {if $loginUser.isLogin}
	              {if $article.user_id eq $loginUser.uid || admin_check('thread.edit')}<a href="{:url('wendasns/article/post',['id'=>$article.id])}" style="margin-right: 10px;"><i class="layui-icon layui-icon-edit"></i> 编辑</a>{/if}
	              {if $article.user_id eq $loginUser.uid || admin_check('thread.remove')}<a href="{:url('wendasns/article/remove')}" style="margin-right: 10px;" class="J_req" data-json='{"id":"{$article.id}"}' title="确定要删除吗？"><i class="layui-icon layui-icon-delete"></i> 删除</a>{/if}
              {/if}
              
              {if $article.iscollect}
              <a href="javascript:;" style="margin-right: 10px;"><i class="layui-icon layui-icon-star-fill"></i> 已收藏</a>
              {else}
              <a href="{:url('wendasns/article/collect')}" style="margin-right: 10px;" class="J_req" data-json='{"id":"{$article.id}"}' data-click="collect"><i class="layui-icon layui-icon-star"></i> 收藏</a>
              {/if}
              <a href="{:url('wendasns/api/report')}" style="margin-right: 10px;" class="J_dialog" data-json='{"id":"{$article.id}","type":"article"}' title="举报"><i class="layui-icon layui-icon-tips"></i> 举报</a>
              
              {if miniapp() neq true}<a href="#share" class="J_req" data-click="share" style="margin-right: 10px;"><i class="layui-icon layui-icon-share"></i> 分享</a>{/if}
              {if admin_check('thread.top')}
              	{if $article.top}<a href="{:url('wendasns/common/top',['type'=>'article'])}" style="margin-right: 10px;color: #01AAED;" class="J_req" data-json='{"id":"{$article.id}"}' data-click="top"><i class="layui-icon layui-icon-top"></i> 取消置顶</a>{else}<a href="{:url('wendasns/common/top',['type'=>'article'])}" style="margin-right: 10px;color: #01AAED;" class="J_req" data-json='{"id":"{$article.id}"}' data-click="top"><i class="layui-icon layui-icon-top"></i> 置顶</a>{/if}
              {/if}
              {if admin_check('thread.recommend')}
              	{if $article.recommend}<a href="{:url('wendasns/common/recommend',['type'=>'article'])}" style="margin-right: 10px;color: #FF5722;" class="J_req" data-json='{"id":"{$article.id}"}' data-click="recommend"><i class="layui-icon layui-icon-fire"></i> 取消推荐</a>{else}<a href="{:url('wendasns/common/recommend',['type'=>'article'])}" style="margin-right: 10px;color: #FF5722;" class="J_req" data-json='{"id":"{$article.id}"}' data-click="recommend"><i class="layui-icon layui-icon-fire"></i> 推荐</a>{/if}
              {/if}
              {if $article.status eq 'check' && admin_check('thread.check')}
              	<a href="{:url('wendasns/common/check',['type'=>'article'])}" style="margin-right: 10px;" class="J_req" data-json='{"id":"{$article.id}"}'><i class="layui-icon layui-icon-auz"></i> 审核通过</a>
              {/if}
              {if $article.client}<span style="color: #009688;">来自：{$article.client}客户端</span>{/if}
            </div>
			{/if}
			</div>
		</div>
		
		{:load_advert('ArticlePageCentre')}
		
      <div class="layui-card">
        <div class="layui-card-header">发表评论</div>
        <div class="layui-card-body">
          <form class="layui-form" action="{:url('wendasns/comment/post')}" method="post">
          	<input type="hidden" name="id" value="{$article.id}">
          	<input type="hidden" name="type" value="article">
        <div class="layui-form-item">
          
          <div class="layui-form-text">
            <textarea name="content" placeholder="请输入内容" lay-verify="required" class="layui-textarea"></textarea>
          </div>
        </div>
        
        <div class="layui-form-item">
          <div class="layui-input-inline">
            <button class="layui-btn" lay-submit="" lay-filter="J_ajaxReply">提交</button>
          </div>
        </div>
        {:hook('article_show_comment_form_item')}
          </form>
        </div>
      </div>

      <div class="layui-card">
        <div class="layui-card-header"><span id="comment-num-{$article.id}">{$comment->total()}</span>条评论</div>
        <div class="layui-card-body">
          <div class="layui-row" id="comment-list">
          <!--评论-->
			<ul id="comment-article-{$article.id}" class="article-comment">
			{include file="unify/comment"}
			</ul>
          <!--评论 END-->
          </div>
        </div>
      </div>

    </div>
    
    <div class="layui-col-md3">
      
      {:hook('article_show_right_top_extra')}
      
      <div class="layui-card">
        <div class="layui-card-header">其他类似文章</div>
        <div class="layui-card-body">
          <ul>
          {volist name="alikes" id="item"}
            <li><a href="{:url('wendasns/article/show',$item)}">{$item.title}</a></li>
          {/volist}
          </ul>
        </div>
      </div>
      {include file="common/right"}
    </div>
  </div>
</div>
  
<div id="layui-anim" style="background-color: #fff;position: fixed;top: 0;width: 100%;left: 0;z-index: 10001;border-bottom: 1px solid #dae0e4;box-shadow:0 2px 10px 0 rgba(0,0,0,.15);display: none;">
  <div class="layui-container">
    <div class="layui-row">
      <div class="layui-col-md8">
        <div class="layui-card" style="overflow: hidden;">
            <h2 id="topTitle" style="color: #000000;height: 60px;line-height: 60px;">{$article.title}</h2>
        </div>
      </div>
      <div class="layui-col-md4">
        <div class="layui-card">
          <div class="layui-hide-xs" style="margin-top: 10px;text-align: center;">
            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6"><p>收藏量</p><mdall>{$article.collect}</mdall></div>
            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6"><p>阅读量</p><mdall>{$article.visits}</mdall></div>
            </div>
        </div>
      </div>
    </div>
  </div>
</div>

{include file="common/footer"}
<!--评论-->
<script id="comment_post_view" type="text/html">
<div class="{{d.css||''}}">
<form action="{:url('wendasns/comment/post')}" class="layui-form" style="position: relative;margin-bottom: 10px;margin-top: 10px;">
	<input type="hidden" name="id" value="{{d.id}}"/>
	<input type="hidden" name="type" value="{{d.type}}"/>
	<div style="margin-right: 74px;"><input type="text" name="content" required="" lay-verify="required" placeholder="{{d.tips||''}}" autocomplete="off" class="layui-input"></div>
	<div style="position: absolute;top: 0;right: 0;"><button class="layui-btn" lay-submit lay-filter="J_ajaxReply">发表</button></div>
</form>
</div>

</script>
<script>
;!function(){
	var $ = layui.$
	,flow = layui.flow;

  //页面滚动，显示顶部标题
  $(document).scroll(function(){
    var scroH = $(document).scrollTop();  //滚动高度
    if(scroH >95){
      $('#layui-anim').fadeIn('slow');
    }else{
      $('#layui-anim').fadeOut('slow');
    }
  });


    flow.load({
      elem: '#comment-list' //流加载容器
      ,scrollElem: '' //滚动条所在元素，一般不用填，此处只是演示需要。
      ,isAuto: false
      ,isLazyimg: true
      ,done: function(page, next){ //加载下一页
        if(page>1){
	        $.get('{:url('wendasns/comment/list')}',{id:wdinfo.id,page:page,type:'article'},function(res){
	        	next(res, page < {$comment->lastPage()});
	        });
        }else{
        	next('', page < {$comment->lastPage()});
        }
      }
    });

    layui.code({
      elem: 'pre'
      ,about: false
    });
    
}();
</script>
{:hook('article_show_bottom_extra')}
</body>
</html>